<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" class="verify-form" label-width="80px">
      <el-form-item label="储值卡号" prop="cardNum" v-if="type != 'batchAdd'">
        <el-input v-model="dataForm.cardNum" placeholder="储值卡号" :disabled="type == 'update'"></el-input>
      </el-form-item>
      <el-form-item label="储值卡号前段" prop="cardNumBefore" v-if="type == 'batchAdd'">
        <el-input v-model="dataForm.cardNumBefore" placeholder="储值卡号前段"></el-input>
      </el-form-item>
      <el-form-item label="储值卡号后段" prop="cardNumAfter" v-if="type == 'batchAdd'">
        <el-input v-model="dataForm.cardNumAfter" placeholder="储值卡号后段"></el-input>
      </el-form-item>
      <el-form-item label="卡类型" prop="cardType">
        <el-radio v-model="dataForm.cardType" :label="1">普通储值卡</el-radio>
        <el-radio v-model="dataForm.cardType" :label="2">特殊储值卡</el-radio>
      </el-form-item>
      <el-form-item label="发放部门" prop="saleDeptId">
        <!-- <el-input v-model="dataForm.saleDeptId" placeholder="发放部门id"></el-input> -->
        <el-select v-model="dataForm.saleDeptId" placeholder="请选择">
          <el-option v-for="item in deptIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="实付金额" prop="realPayMoney" v-if="type == 'add'">
        <el-input v-model="dataForm.realPayMoney" placeholder="实付金额" @change="sumChange(dataForm.realPayMoney,dataForm.givenMoney)"></el-input>
      </el-form-item>
      <el-form-item label="赠送金额" prop="givenMoney" v-if="type == 'add'">
        <el-input v-model="dataForm.givenMoney" placeholder="赠送金额" @change="sumChange(dataForm.realPayMoney,dataForm.givenMoney)"></el-input>
      </el-form-item>
      <el-form-item label="储值金额" prop="changeMoney" v-if="type == 'add'">
        <el-input v-model="dataForm.changeMoney" placeholder="储值金额" disabled></el-input>
      </el-form-item>
      <el-form-item label="卡内金额" prop="balance" v-if="type == 'update'">
        <el-input v-model="dataForm.balance" placeholder="卡内金额" disabled></el-input>
      </el-form-item>
      <el-form-item label="绑定会员" prop="customerId">
        <el-input v-model="dataForm.customerName" placeholder="绑定会员">
          <el-button slot="append" @click="selectCustomer">选择</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="身份证号码" prop="idNumber">
        <el-input v-model="dataForm.idNumber" placeholder="身份证号码"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="dataForm.phone" placeholder="手机号码"></el-input>
      </el-form-item>
      <el-form-item label="是否设置密码" prop="isPassword">
        <el-checkbox v-model="dataForm.isPassword" true-label="1" false-label="0">是否设置密码</el-checkbox>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="dataForm.password" placeholder="密码" v-if="dataForm.isPassword == 1"></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="number" v-if="type == 'batchAdd'">
        <el-input v-model="dataForm.number" placeholder="数量"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="memo">
        <el-input v-model="dataForm.memo" placeholder="备注"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit" :loading="ischeck" v-prevent-re-click>确定</el-button>
    </span>
    <search-customer v-if="searchCustomerVisible" ref="searchCustomer" @refreshForm="updateForm"></search-customer>
  </el-dialog>
</template>

<script>
  import {
    getObj,
    addObj,
    putObj,
    batchAddObj
  } from "@/api/eims/savemoneycard";
  import {
    getDeptInfo
  } from "@/api/admin/dept"

  import SearchCustomer from '@/components/business/customer-search'

  export default {
    data() {
      var cardNumCheck = (rule, value, callback) => {
        let numPattern = /^\w+$/
        if (!numPattern.test(value)) {
          callback(new Error("请输入字母或者数字,最长长度为12位"));
        } else {
          callback()
        }
      };
      var cardNumAfterCheck = (rule, value, callback) => {
        let numPattern = /^-?\d*\.?\d+$/
        if (!numPattern.test(value)) {
          callback(new Error("请输入长度在 3 到 6 个数字"));
        } else {
          callback()
        }
      };
      var cardNumBeforeCheck = (rule, value, callback) => {
        let numPattern = /^\w+$/
        if (!numPattern.test(value)) {
          callback(new Error("请输入长度在 1 到 6 位字符"));
        } else {
          callback()
        }
      };
      var moneyCheck = (rule, value, callback) => {
        let numPattern = /^-?\d*\.?\d+$/
        if (!numPattern.test(value)) {
          callback(new Error("请输入阿拉伯数字"));
        } else {
          callback()
        }
      };
      return {
				ischeck: false,
        visible: false,
        type: "",
        deptIdOptions: [],
        searchCustomerVisible: false,
        dataForm: {
          id: 0,
          cardNum: "",
          cardNumBefore: "",
          cardNumAfter: "",
          saleDeptId: "",
          createDeptId: "",
          realPayMoney: "",
          givenMoney: "",
          changeMoney: "",
          balance: "",
          customerId: "",
          customerName: '',
          idNumber: "",
          phone: "",
          isPassword: "",
          password: "",
          number: "",
          memo: "",
        },
        dataRule: {
          cardNum: [{
              required: true,
              message: "储值卡号不能为空",
              trigger: "blur"
            },
            {
              min: 1,
              max: 12,
              message: '请输入长度在 1 到 12 位字符',
              trigger: 'blur'
            },
            {
              validator: cardNumCheck
            }
          ],
          cardNumBefore: [{
              required: true,
              message: "折扣卡卡号前段不能为空",
              trigger: "blur"
            },
            {
              min: 1,
              max: 6,
              message: '请输入长度在 1 到 6 位字符',
              trigger: 'blur'
            },
            {
              validator: cardNumBeforeCheck
            }
          ],
          cardNumAfter: [{
              required: true,
              message: "折扣卡卡号不能为空",
              trigger: 'blur'
            },
            {
              min: 3,
              max: 6,
              message: '长度在 3 到 6 个数字字符',
              trigger: 'blur'
            },
            {
              validator: cardNumAfterCheck
            }
          ],
          saleDeptId: [{
            required: true,
            message: "发放部门id不能为空",
            trigger: "blur"
          }],
          realPayMoney: [{
              required: true,
              message: "实付金额不能为空",
              trigger: "blur"
            },
            {
              validator: moneyCheck
            }
          ],
          givenMoney: [{
              required: true,
              message: "赠送金额不能为空",
              trigger: "blur"
            },
            {
              validator: moneyCheck
            }
          ],
          changeMoney: [{
            required: true,
            message: "储值金额不能为空",
            trigger: "blur"
          }],
          number: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }],
          cardType: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }]
        }
      };
    },
    components: {
      SearchCustomer
    },
    methods: {
      init(data) {
        this.dataForm.id = data.id || 0
        this.type = data.type
        this.visible = true
        this.$nextTick(() => {
          this.getDataList()
          this.$refs["dataForm"].resetFields()
          if (this.dataForm.id) {
            getObj(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
                this.dataForm = response.data.data
              }else{
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
				this.ischeck = true
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            if (this.dataForm.id) {
              putObj(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.$message.success("修改成功")
                  this.visible = false
                  this.$emit("refreshDataList")
                }else{
                  this.$message.error(response.data.msg)
                }
                this.ischeck = false
              }).catch(() => {
								tis.ischeck = false
							})
            } else {
              if (this.type == "add") {
                addObj(this.dataForm).then(response => {
                  if(response.data.code == '0'){
                    this.$message.success("添加成功")
                    this.visible = false
                    this.$emit("refreshDataList")
                  }else{
                    this.$message.error(response.data.msg)
                  }
                  this.ischeck = false
                }).catch(() => {
									tis.ischeck = false
								})
              } else {
                // 批量新增
                batchAddObj(this.dataForm).then(response => {
                  if(response.data.code == '0'){
                    this.$message.success("添加成功")
                    this.visible = false
                    this.$emit("refreshDataList")
                  }else{
                    this.$message.error(response.data.msg)
                  }
                }).catch(() => {
									this.ischeck = false
								})
              }
            }
          }else{
						this.ischeck = false
					}
        });
      },
      getDataList() {
        getDeptInfo().then(response => {
          if(response.data.code == '0'){
            let result = response.data.data
            let list = []
            result.forEach(item => {
              list.push({
                value: item.id,
                label: item.name
              })
            })
            this.deptIdOptions = list
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      sumChange(val1, val2) {
        let a = val1 == "" ? 0 : parseFloat(val1)
        let b = val2 == "" ? 0 : parseFloat(val2)
        this.dataForm.changeMoney = a + b
      },
      selectCustomer() {
        this.searchCustomerVisible = true
        this.$nextTick(() => {
          this.$refs.searchCustomer.init('')
        })
      },
      updateForm(data) {
        this.dataForm.customerId = data.id
        this.dataForm.customerName = data.name
      }
    }
  };
</script>
